<template>
    <div :style="{height:'100%'}">
        <Tabs @on-click="changeTree" :style="{height:'100%'}">
            <TabPane label="新闻"><Tree :data="treelist" @on-select-change="getTid"></Tree></TabPane>
            <TabPane label="产品"><Tree :data="treelist" @on-select-change="getTid"></Tree></TabPane>
            <TabPane label="上传"><Tree :data="treelist" @on-select-change="getTid"></Tree></TabPane>
            <Button @click="addTabs" size="small" style="margin:0 5px" slot="extra">增加</Button>
            <Button @click="editTabs" size="small" style="margin:0 5px" slot="extra">修改</Button>
            <Button @click="deleteTabs" size="small" style="margin:0 5px" slot="extra">删除</Button>
        </Tabs>
        <Modal title="操作" v-model="modalShow" :mask-closable="false" @on-ok="getNewList" @on-cancel="clear">
                分类名称：<Input v-model="value" style="width: 300px" @on-enter="enterPut" autofocus/>
        </Modal>
    </div>
</template>
<script>
export default {
  data() {
    return {
        modalShow:false,
        aOre:1,
        treelist: [],
        host: "http://10.31.156.62:3000",
        ntype: 1,
        parentId:'',
        nowId:'',
        value:'',
        datas:{},
        title:''
    };
  },
  methods: {
    getlist() {
      this.axios({
        url: `${this.host}/cate/list/${this.ntype}`,
        method: "post"
      }).then(res => {
        this.treelist = res.data;
        this.parentId=''
        this.nowId=''
        this.value=''
        this.datas={}
      });
    },
    changeTree(index){
        this.ntype=index+1;
        this.getlist();
    },
    getTid(el){
        if(el!=''){
            this.parentId=el[0].parentId;
            this.nowId=el[0]._id;
            this.title=el[0].title;
        }else{
            this.parentId=''
            this.nowId=''
            this.title=''
        }
    },
    addTabs(){
        this.modalShow = true;
        this.aOre=1;
        
    },
    editTabs(){
        this.modalShow = true;
        this.aOre=2;
        this.value=this.title;
    },
    deleteTabs(){
        if(this.nowId!=''){
            this.$Modal.confirm({
            title: '数据删除',
            content: '您确定删除吗',
                onOk: () => {
                    this.axios({
                        url:`${this.host}/cate/data/${this.nowId}`,
                        method:'delete'
                    }).then(res=>{
                        this.getlist();
                    })
                }
            });

            
        }else{
            this.$Message.error("请选择需要删除的分类")
        }
    },
    getNewList(){
        this.upStop=true
        if(this.nowId!=''){
            this.datas={
                title:this.value,
                type:this.ntype
            }
        }else if(this.nowId==''){
            this.datas={
                title:this.value,
                type:this.ntype
            }
        }
        if(this.aOre==1){
            if(this.nowId!=''){
                this.datas.parentId=this.nowId
            }
            
            this.axios({
                url: `${this.host}/cate/data`,
                method:'post',
                data:this.datas
            }).then(res=>{
                this.getlist();
            })
        }else if(this.aOre==2){
            this.datas.parentId=this.parentId
            this.axios({
                url: `${this.host}/cate/data/${this.nowId}`,
                method:'put',
                data:this.datas
            }).then(res=>{
                this.getlist();
            })
        }
    },
    clear(){
        this.value=''
    },
    enterPut(){
        this.getNewList()
        this.modalShow=false
        this.value=''
    }
  },
  mounted() {
    this.getlist();
  }
};
</script>